<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <router-link to="/toProjectStandingBook">查看详情 <a-icon type="right-circle"/></router-link>
      </div>
      <a-row :gutter="16">
        <a-col :span="7">
          <a-card class="index-ant-card" size="small" title="累计改造完成用户数">
            <a slot="extra">户</a>
            <num-animate :allUserNumber="allUserNumber"></num-animate>
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="累计改造完成面积数">
            <a slot="extra">平米</a>
            <num-animate :allAreaNumber="allAreaNumber"></num-animate>
          </a-card>
          <a-card class="index-ant-card" size="small" title="不同改造路径占比">
            <a-button-group slot="extra">
              <a-button
                v-for="(val, index) in updatePlans"
                :type="val.type"
                @click="updatePlansChange(val)"
                :key="index"
              >{{ val.name }}</a-button
              >
            </a-button-group>
            <scale-pie :chartData="updateData"></scale-pie>
          </a-card>
        </a-col>
        <a-col :span="10">
          <div class="map-box">
            <div class="target-area-box">
              <p>当前区域：{{ targetAreaUserNum.name }}</p>
              <p>改造完成数：{{ targetAreaUserNum.value }}</p>
            </div>
            <map-chart :targetArea="targetArea" @mapChange="mapChange" />
            <ul class="supplier-list">
              <li
                v-for="(item, index) in areaList"
                :key="index"
                :class="{ checked: item.checked }"
                @click="areaClick(index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="各品牌设备的数量">
            <a-button-group slot="extra">
              <a-button
                v-for="(val, index) in productYears"
                :type="val.type"
                @click="productYearsChange(val)"
                :key="index"
              >{{ val.name }}</a-button
              >
            </a-button-group>
            <bar-line :chartData="productYearData"></bar-line>
          </a-card>
        </a-col>
        <a-col :span="7">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="各区域用户数量">
            <a-button-group slot="extra">
              <a-button
                v-for="(val, index) in userNumYears"
                :type="val.type"
                @click="userNumYearsChange(val)"
                :key="index"
              >{{ val.name }}</a-button
              >
            </a-button-group>
            <doughnut :chartData="areaUserNum" />
          </a-card>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="用户台账">
            <a-button-group slot="extra">
              <a-button
                v-for="(val, index) in standingBookYears"
                :type="val.type"
                @click="standingBookYearsChange(val)"
                :key="index"
              >{{ val.name }}</a-button
              >
            </a-button-group>
            <rose :chartData="standingBook" />
          </a-card>
        </a-col>
      </a-row>
      <!-- <num-animate></num-animate> -->
    </a-layout-content>
  </div>
</template>

<script>
import NumAnimate from '@/components/CleanBaskDemo/numAnimate'
import MapChart from '@/components/CleanBaskDemo/map'
import ScalePie from '@/components/CleanBaskDemo/scalePie'
import BarLine from '@/components/CleanBaskDemo/barLine'
import Doughnut from '@/components/CleanBaskDemo/doughnut'
import Rose from '@/components/CleanBaskDemo/rose'
export default {
  name: 'ProjectStandingBook',
  components: {
    MapChart,
    ScalePie,
    BarLine,
    Doughnut,
    Rose,
    NumAnimate
  },
  data () {
    return {
      areaList: [
        { name: '清徐县', checked: true },
        { name: '阳曲县', checked: false },
        { name: '娄烦县', checked: false },
        { name: '小店区', checked: false },
        { name: '迎泽区', checked: false },
        { name: '杏花岭区', checked: false },
        { name: '尖草坪区', checked: false },
        { name: '万柏林区', checked: false },
        { name: '晋源区', checked: false },
        { name: '古交市', checked: false }
      ],
      targetArea: '清徐县',
      allUserNumber: 5411, // 累计改造完成用户数
      allAreaNumber: 1642105, // 累计改造完成面积数
      targetAreaUserNum: { name: '清徐县', value: 1000 }, // 当前选中区域完成改造数据
      updatePlans: [
        { name: '煤改气', type: 'primary' },
        { name: '煤改电', type: '' },
        { name: '集中供热', type: '' },
        { name: '其他', type: '' }
      ],
      updateData: [
        {
          name: '用户数占比',
          value: 256,
          scale: 10
        },
        {
          name: '面积数占比',
          value: 256,
          scale: 10
        }
      ],
      areaAllUserNum: [
        { name: '清徐县', value: 1000 },
        { name: '阳曲县', value: 2000 },
        { name: '娄烦县', value: 3000 },
        { name: '小店区', value: 4000 },
        { name: '迎泽区', value: 5000 },
        { name: '杏花岭区', value: 6000 },
        { name: '尖草坪区', value: 7000 },
        { name: '万柏林区', value: 8000 },
        { name: '晋源区', value: 9000 },
        { name: '古交市', value: 1500 }
      ],
      standingBookYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      // 2019年度用户台账数据
      standingBook: {
        data: [
          { name: '已完成数', value: 2865 },
          { name: '未完成数', value: 568 }
        ],
        total: 3433
      },
      userNumYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      // 各区域用户数量
      areaUserNum: [
        { value: 17, name: '刘家堡乡' },
        { value: 23, name: '坞城街道' },
        { value: 27, name: '营盘街道' },
        { value: 33, name: '西温庄' },
        { value: 9, name: '北格镇' }
      ],
      productYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      productYearData: [1544, 3285, 5208, 3372, 2484, 4078] // 各品牌设备的数量
    }
  },
  methods: {
    areaClick (index) {
      this.areaList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.targetArea = ele.name
          this.targetAreaUserNum = this.areaAllUserNum.find(item => item.name === ele.name)
        }
      })
    },
    mapChange (name) {
      console.log(name)
      this.areaList.forEach(ele => {
        ele.checked = false
        if (name === ele.name) {
          ele.checked = true
          this.targetArea = ele.name
          this.targetAreaUserNum = this.areaAllUserNum.find(item => item.name === ele.name)
        }
      })
    },
    updatePlansChange (val) {
      this.updatePlans.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '煤改气':
          this.updateData[0].value = this.updateData[1].value = 256
          this.updateData[0].scale = this.updateData[1].scale = 10
          return
        case '煤改电':
          this.updateData[0].value = this.updateData[1].value = 512
          this.updateData[0].scale = this.updateData[1].scale = 20
          return
        case '集中供热':
          this.updateData[0].value = this.updateData[1].value = 768
          this.updateData[0].scale = this.updateData[1].scale = 30
          return
        case '其他':
          this.updateData[0].value = this.updateData[1].value = 1024
          this.updateData[0].scale = this.updateData[1].scale = 40
      }
    },
    productYearsChange (val) {
      this.productYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.productYearData = [1544, 3285, 5208, 3372, 2484, 4078]
          return
        case '2019年':
          this.productYearData = [2544, 4285, 6208, 4372, 3484, 5078]
          return
        case '2020年':
          this.productYearData = [3544, 5285, 7208, 5372, 4484, 6078]
      }
    },
    userNumYearsChange (val) {
      this.userNumYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.areaUserNum = [
            { value: 17, name: '刘家堡乡' },
            { value: 23, name: '坞城街道' },
            { value: 27, name: '营盘街道' },
            { value: 33, name: '西温庄' },
            { value: 9, name: '北格镇' }
          ]
          return
        case '2019年':
          this.areaUserNum = [
            { value: 27, name: '刘家堡乡' },
            { value: 33, name: '坞城街道' },
            { value: 37, name: '营盘街道' },
            { value: 43, name: '西温庄' },
            { value: 19, name: '北格镇' }
          ]
          return
        case '2020年':
          this.areaUserNum = [
            { value: 37, name: '刘家堡乡' },
            { value: 43, name: '坞城街道' },
            { value: 47, name: '营盘街道' },
            { value: 53, name: '西温庄' },
            { value: 29, name: '北格镇' }
          ]
      }
    },
    standingBookYearsChange (val) {
      this.standingBookYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.standingBook.data = [
            { name: '已完成数', value: 2865 },
            { name: '未完成数', value: 568 }
          ]
          this.standingBook.total = 3433
          return
        case '2019年':
          this.standingBook.data = [
            { name: '已完成数', value: 1865 },
            { name: '未完成数', value: 468 }
          ]
          this.standingBook.total = 2333
          return
        case '2020年':
          this.standingBook.data = [
            { name: '已完成数', value: 865 },
            { name: '未完成数', value: 368 }
          ]
          this.standingBook.total = 1233
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .target-area-box {
      position: absolute;
      bottom: 16px;
      left: 16px;
      color: #fff;
      z-index: 10;
      background: #060d3c;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid rgb(11, 26, 92);
      p {
        margin-bottom: 0;
        line-height: 30px;
        font-size: 12px;
      }
    }
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
